分享完關於圖片的排版設計，今天我們就來進行排版的實作啦！

之前有介紹過的<float><inline-block>其實都是常見用來排版的方式，<float>相對於<inline-block>在瀏覽器方面有較高的支援度，但在使用時要注意清除浮動，才不會影響到後續的排版，這個之前沒有提醒過，這裡簡單用個範例介紹一下：

.clearfix::after { /＊建立偽元素 放在容器後面＊/
  content: "";
  clear: both; /＊清除浮動＊/
  display: table;
}

這樣下一個元素就不會跟著左右浮動啦！如果有遇到類似的問題，大家可以去試試看喔～

那我們今天主要是介紹<flexbox>的排版方式！

首先是設定的部分，利用<display>標籤把容器設置為flex屬性。

.flexbox {
  display: flex;
}

接下來介紹幾種flexbox常用的屬性，在排版時可以彈性的去做搭配使用

• <flex-direction> 定義容器想要堆疊內部元素的方向

.flexbox{
    flex-direction:row;
    /＊水平堆疊項目 從左到右＊/
}
.flexbox{
    flex-direction:column;
    /＊垂直堆疊項目 從上到下＊/
}
.flexbox{
    flex-direction:row-reverse;
   /＊水平堆疊項目 從右到左＊/
}
.flexbox{
    flex-direction:column-reverse;
   /＊垂直堆疊項目 從下到上＊/
}

• <flex-wrap>指定容器內的元素是否要換行

.flexbox {
  display: flex;
  flex-wrap: nowrap;/＊元素不換行（預設）＊/
}
.flexbox {
  display: flex;
  flex-wrap: wrap; /＊元素換行＊/
}

• <justify-content>可以影響元素的水平對齊

.flexbox {
  display: flex;
  justify-content: flex-start;/＊對齊容器開頭的項目＊/
}
.flexbox {
  display: flex;
  justify-content: flex-end; /＊對齊容器結尾的項目＊/
}
.flexbox {
  display: flex;
  justify-content: center;  /＊對齊到容器的中心＊/
}
.flexbox {
  display: flex;
  justify-content: space-around;  /＊平均分配間距＊/
}
.flexbox {
  display: flex;
  justify-content: space-between;  /＊平均分配間距，左右元素會貼齊邊界＊/
}

• <align-items>可以影響元素的垂直對齊

.flexbox {
  display: flex;
  align-items: flex-start;/＊對齊容器上方＊/
}
.flexbox {
  display: flex;
  align-items: flex-end; /＊對齊容器下方＊/
}
.flexbox {
  display: flex;
  align-items: center;  /＊對齊到容器的垂直中心＊/
}
.flexbox {
  display: flex;
  align-items:stretch;;  /＊把內部元素全部撐開到Flexbox的高度＊/
}
.flexbox {
  display: flex;
  align-items:baseline;  /＊以內部元素的基線作為對齊標準＊/
}

以上就是<flexbox>簡單的介紹，其實<flexbox>還有很多特別的屬性可以做使用，這個屬性讓我們在做排版可以更加彈性，熟悉的話在排版時非常好用喔！推薦大家可以多多練習，那我們圖片排版的主題就到今天結束了～希望大家可以收穫多多